<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Bootstrap v3.3.4 核心 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/sqh_style_v2.0.css">
    <script src="../js/sqh_js_v2.0.js"></script>
    <title>jquery.validate 扩展</title>

</head>

<body class="">

<form class="form-horizontal">

    <div class="form-group">
        <label class="col-xs-2 control-label">身份证</label>
        <div class="col-xs-10">
            <input type="text" id="IDNumber" class="form-control" placeholder="请输入身份证号码">
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </div>

</form>

</body>
<script>

    $(function() {

        $("#signupForm").validate({
            //设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。
            onsubmit:true,
            onfocusout:true,
            onkeyup:false,
            onclick:false,

            //手动设置错误信息的显示方式
            errorPlacement: function(error, element) {
                error.appendTo(element.closest("div.padding_top_20").find(".errorTips")[0]);
//                error.appendTo(element.parent().next());
            },

            rules: {
                IDNumber:{
                    validatePhoneNumber:true,
                    required: true,
                    maxlength:11,
                    minlength:11,
                    number:true
                }
            },
            //校验提示信息
            messages: {
                phoneNumber:{
                    required: "请输入手机号码",
                    minlength:"手机号码不正确",
                    maxlength:"手机号码不正确",
                    number:"请输入数字",
                    validatePhoneNumber:"号码已经注册"
                }
            }
        });

    });

</script>

</html>
